<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Edstudy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
        <!-- Place favicon.ico in the root directory -->

		<!-- CSS here -->
        <link rel="stylesheet" href="index.css">
		<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
		<script src="http://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
		<script src="index.js"></script>
    </head>
    <body>
		<div class="viewport"> 
		   <div class="column"> 
		    <div class="overview panel"> 
		     <div class="inner"> 
		      <div class="item"> 
		       <h4>2,190</h4> 
		       <span> <i class="fa fa-square" style="color: #006cff"></i> 设备总数 </span> 
		      </div> 
		      <div class="item"> 
		       <h4>190</h4> 
		       <span> <i class="fa fa-square" style="color: #6acca3"></i> 季度新增 </span> 
		      </div> 
		      <div class="item"> 
		       <h4>3,001</h4> 
		       <span> <i class="fa fa-square" style="color: #6acca3"></i> 运营设备 </span> 
		      </div> 
		      <div class="item"> 
		       <h4>108</h4> 
		       <span> <i class="fa fa-square" style="color: #ed3f35"></i> 异常设备 </span> 
		      </div> 
		     </div> 
		    </div> 
		    <div class="monitor panel"> 
		     <div class="inner"> 
		      <div class="tabs"> 
		       <a href="javascript:;" data-index="0" class="active">故障设备监控</a> 
		       <a href="javascript:;" data-index="1">异常设备监控</a> 
		      </div> 
		      <div class="content" style="display: block;"> 
		       <div class="head"> 
		        <span class="col">故障时间</span> 
		        <span class="col">设备地址</span> 
		        <span class="col">异常代码</span> 
		       </div> 
		       <div class="marquee-view"> 
		        <div class="marquee"> 
		         <div class="row"> 
		          <span class="col">20180701</span> 
		          <span class="col">11北京市昌平西路金燕龙写字楼</span> 
		          <span class="col">1000001</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190601</span> 
		          <span class="col">北京市昌平区城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190704</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000003</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20180701</span> 
		          <span class="col">北京市昌平区建路金燕龙写字楼</span> 
		          <span class="col">1000004</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190701</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000005</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190701</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000006</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190701</span> 
		          <span class="col">北京市昌平区建西路金燕龙写字楼</span> 
		          <span class="col">1000007</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190701</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000008</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190701</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000009</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190710</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000010</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		        </div> 
		       </div> 
		      </div> 
		      <div class="content"> 
		       <div class="head"> 
		        <span class="col">异常时间</span> 
		        <span class="col">设备地址</span> 
		        <span class="col">异常代码</span> 
		       </div> 
		       <div class="marquee-view"> 
		        <div class="marquee"> 
		         <div class="row"> 
		          <span class="col">20190701</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000001</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190701</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190703</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190704</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190705</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190706</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190707</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190708</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190709</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		         <div class="row"> 
		          <span class="col">20190710</span> 
		          <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> 
		          <span class="col">1000002</span> 
		          <span class="fa fa-square"></span> 
		         </div> 
		        </div> 
		       </div> 
		      </div> 
		     </div> 
		    </div> 
		    <div class="point panel"> 
		     <div class="inner"> 
		      <h3>点位分布统计</h3> 
		      <div class="chart"> 
		       <div class="pie"></div> 
		       <div class="data"> 
		        <div class="item"> 
		         <h4>320,11</h4> 
		         <span> <i class="fa fa-square" style="color: #ed3f35"></i> 点位总数 </span> 
		        </div> 
		        <div class="item"> 
		         <h4>418</h4> 
		         <span> <i class="fa fa-square" style="color: #eacf19"></i> 本月新增 </span> 
		        </div> 
		       </div> 
		      </div> 
		     </div> 
		    </div> 
		   </div> 
		   <div class="column"> 
		    <div class="map"> 
		     <h3> <span class="icon-cube"></span> 设备数据统计 </h3> 
		     <div class="chart"> 
		      <div class="geo"></div> 
		     </div> 
		    </div> 
		    <div class="users panel"> 
		     <div class="inner"> 
		      <h3>全国用户总量统计</h3> 
		      <div class="chart"> 
		       <div class="bar"></div> 
		       <div class="data"> 
		        <div class="item"> 
		         <h4>120,899</h4> 
		         <span> <i class="fa fa-square" style="color: #ed3f35"></i> 用户总量 </span> 
		        </div> 
		        <div class="item"> 
		         <h4>248</h4> 
		         <span> <i class="fa fa-square" style="color: #eacf19"></i> 本月新增 </span> 
		        </div> 
		       </div> 
		      </div> 
		     </div> 
		    </div> 
		   </div> 
		   <div class="column"> 
		    <div class="order panel"> 
		     <div class="inner"> 
		      <div class="filter"> 
		       <a href="javascript:;" data-key="day365" class="active">365天</a> 
		       <a href="javascript:;" data-key="day90">90天</a> 
		       <a href="javascript:;" data-key="day30">30天</a> 
		       <a href="javascript:;" data-key="day1">24小时</a> 
		      </div> 
		      <div class="data"> 
		       <div class="item"> 
		        <h4>20,301,987</h4> 
		        <span> <i class="fa fa-square" style="color: #ed3f35;"></i> 订单量 </span> 
		       </div> 
		       <div class="item"> 
		        <h4>99834</h4> 
		        <span> <i class="fa fa-square" style="color: #eacf19;"></i> 销售额(万元) </span> 
		       </div> 
		      </div> 
		     </div> 
		    </div> 
		    <div class="sales panel"> 
		     <div class="inner"> 
		      <div class="caption"> 
		       <h3>销售额统计</h3> 
		       <a href="javascript:;" class="active" data-type="year">年</a> 
		       <a href="javascript:;" data-type="quarter">季</a> 
		       <a href="javascript:;" data-type="month">月</a> 
		       <a href="javascript:;" data-type="week">周</a> 
		      </div> 
		      <div class="chart"> 
		       <div class="label">
		        单位:万
		       </div> 
		       <div class="line"></div> 
		      </div> 
		     </div> 
		    </div> 
		    <div class="wrap"> 
		     <div class="channel panel"> 
		      <div class="inner"> 
		       <h3>渠道分布</h3> 
		       <div class="data"> 
		        <div class="item"> 
		         <h4>39 <small>%</small></h4> 
		         <span> <i class="fa fa-plane"></i> 机场 </span> 
		        </div> 
		        <div class="item"> 
		         <h4>28 <small>%</small></h4> 
		         <span> <i class="fa fa-shopping-cart"></i> 商场 </span> 
		        </div> 
		       </div> 
		       <div class="data"> 
		        <div class="item"> 
		         <h4>20 <small>%</small></h4> 
		         <span> <i class="fa fa-train"></i> 地铁 </span> 
		        </div> 
		        <div class="item"> 
		         <h4>13 <small>%</small></h4> 
		         <span> <i class="fa fa-subway"></i> 火车站 </span> 
		        </div> 
		       </div> 
		      </div> 
		     </div> 
		     <div class="quarter panel"> 
		      <div class="inner"> 
		       <h3>一季度销售进度</h3> 
		       <div class="chart"> 
		        <div class="box"> 
		         <div class="gauge"></div> 
		         <div class="label">
		          75
		          <small> %</small>
		         </div> 
		        </div> 
		        <div class="data"> 
		         <div class="item"> 
		          <h4>1,321</h4> 
		          <span> <i class="fa fa-square" style="color: #6acca3"></i> 销售额(万元) </span> 
		         </div> 
		         <div class="item"> 
		          <h4>150%</h4> 
		          <span> <i class="fa fa-square" style="color: #ed3f35"></i> 同比增长 </span> 
		         </div> 
		        </div> 
		       </div> 
		      </div> 
		     </div> 
		    </div> 
		    <div class="top panel"> 
		     <div class="inner"> 
		      <div class="all"> 
		       <h3>全国热榜</h3> 
		       <ul> 
		        <li> <i class="fa fa-trophy" style="color: #d93f36;font-size:20px"></i> 可爱多 </li> 
		        <li> <i class="fa fa-trophy" style="color: #68d8fe;font-size:20px"></i> 娃哈啥 </li> 
		        <li> <i class="fa fa-trophy" style="color: #4c9bfd;font-size:20px"></i> 喜之郎 </li> 
		       </ul> 
		      </div> 
		      <div class="province"> 
		       <h3>各省热销 <i class="date">// 近30日 //</i></h3> 
		       <div class="data"> 
		        <ul class="sup"> 
		         <li> <span>北京</span> <span>25,179 
		           <s class="icon-up"></s></span> </li> 
		         <li> <span>河北</span> <span>23,252 
		           <s class="icon-down"></s></span> </li> 
		         <li> <span>上海</span> <span>20,760 
		           <s class="icon-up"></s></span> </li> 
		         <li> <span>江苏</span> <span>23,252 
		           <s class="icon-down"></s></span> </li> 
		         <li> <span>山东</span> <span>20,760 
		           <s class="icon-up"></s></span> </li> 
		        </ul> 
		        <ul class="sub"> 
		        </ul> 
		       </div> 
		      </div> 
		     </div> 
		    </div> 
		   </div> 
		  </div>
        
    </body>
</html>

